---
title: Heading
description: "`Heading` is a component that represents section headings. By default, it renders an `h1` element."
storybook: components-heading--basic
source: components/heading
style: components/heading/heading.style.ts
---

```tsx preview
<Heading>ギャルのパンティーおくれーーーっ！！！！！</Heading>
```

## Usage

:::code-group

```tsx [package]
import { Heading } from "@yamada-ui/react"
```

```tsx [alias]
import { Heading } from "@/components/ui"
```

```tsx [monorepo]
import { Heading } from "@workspaces/ui"
```

:::

```tsx
<Heading />
```

## Change Size

```tsx preview
<VStack>
  <For
    each={[
      { as: "h1", size: "4xl" },
      { as: "h2", size: "3xl" },
      { as: "h2", size: "2xl" },
      { as: "h3", size: "xl" },
      { as: "h3", size: "lg" },
      { as: "h4", size: "md" },
      { as: "h5", size: "sm" },
      { as: "h6", size: "xs" },
    ]}
  >
    {({ as, size }, index) => (
      <Heading key={index} as={as} size={size} truncated>
        ギャルのパンティーおくれーーーっ！！！！！
      </Heading>
    )}
  </For>
</VStack>
```

## Add Gradient

```tsx preview
<Heading
  size="2xl"
  bgClip="text"
  bgGradient="linear(to-l, #7928CA, #FF0080)"
  truncated
  w="full"
>
  クリリンのことか……クリリンのことかーーーっ！！！！！
</Heading>
```

## Props

<PropsTable name="heading" />
